<template>
  <div class='container ' style="padding:0.417rem">
     <el-card  class="box-card" >
    <!-- form 表单 input -->
      <!-- 按钮位置 -->
            <el-row  >
              <el-col :span="20">
                 <el-form :inline="true"  :model="formInline"  class="demo-form-inline">
            <el-form-item label="目录名称" prop="user">
              <el-input v-model="formInline.user"> </el-input>
              <!-- <el-autocomplete class="inline-input" v-model="formInline.user" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" ></el-autocomplete> -->
            </el-form-item>
            <el-form-item label="状态" prop="region">
            <el-select v-model="formInline.region" placeholder="请选择">
              <el-option   label="请选择" :value="''"></el-option>
              <el-option   v-for="item in nowState " :key="item.value" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
                <el-button size="small " @click="reset" class="Left-spacing">清除</el-button>
              <el-button  size="small " @click="search" type="primary">搜索</el-button>
                </el-form-item>
             </el-form>
              </el-col>
              <!--  -->
               <el-col :span="4">
             <el-row type="flex" justify="end" align="middle">
             <el-link v-if="this.$route.query.name" @click="$router.push('list')" type="primary"><i class="el-icon-back"></i>返回学科</el-link>
             <el-button type="success" size="small" @click="showDialog=true"  class="el-icon-edit ">新增学科</el-button>
            </el-row>
             </el-col>
            </el-row>
      <!-- 警示条 -->
        <el-alert :title="cTitle" type="info" :closable="false" show-icon> </el-alert>
         <!-- 表格 -->
          <el-table ref="filterTable" :data="list"   style="width: 100%">
            <!--  -->
         <el-table-column  prop="date" label="序号" width="80" type=index   >
         </el-table-column>
         <!--  -->
         <el-table-column prop="subjectName" label="所属学科" width="220">
         </el-table-column>
         <!--  -->
         <el-table-column prop="directoryName" label="目录名称" width="220">
         </el-table-column>
         <!--  -->
         <el-table-column prop="username" label="创建者" width="250">
         </el-table-column>
         <el-table-column prop="addDate" label="创建日期" width="250">
           <template v-slot="{row}">
             {{row.addDate | parseTimeByString}}
           </template>
         </el-table-column>
         <!--  -->
         <el-table-column prop="totals" label="面试题数量" width="250">
         </el-table-column>
         <!--  -->
         <el-table-column prop="state" :formatter="EmployeeEnum" label="状态" width="250">
         </el-table-column>
        <!--  -->
        <el-table-column prop="address" label="操作">
      <template v-slot="{row}">
        <el-button  @click="open(row)" type="text">
            {{row.state | state}}
        </el-button>
        <el-button  @click="updatetList(row)" type="text" :disabled="row.state!==1">修改</el-button>
        <el-button @click="DelStudy(row.id)" :disabled="row.state!==1" type="text">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
    <el-row type="flex" justify="end">
      <el-pagination background @size-change="handleSizeChange" @current-change="PageChange" :current-page="page.page" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="page.counts">
    </el-pagination>
    </el-row>
    </el-card>
      <!-- 子组件弹层 -->
      <AddDepts ref="editDepts" :dialogFormVisible.sync="showDialog"/>
  </div>
</template>

<script>
// 获取列表数据-->删除列表数据->状态接口
import { list, remove, changeState } from '@/api/hmmm/directorys'
// 弹层
import AddDepts from '@/module-hmmm/components/directorys-add.vue'
// 引入时间
import { parseTimeByString } from '@/filters'
// 引入 状态
import { status } from '@/api/hmmm/constants'
export default {
  components: {
    AddDepts
  },
  data () {
    return { // 状态数据
      formInline: { user: '', region: '' }, // 存储数据(搜索框的下拉菜单的数据)
      list: [], // 表格列表数据
      page: { // 页数
        pagesize: 10, // 一页多少条
        pages: 1, // 总页数
        page: 1, // 当前页
        counts: 12 // 总条数量
      },
      showDialog: false, // 弹框
      nowState: [], // 存储状态数据
      rules: {
        region: [{ required: true, message: '目录名称不能为空', trigger: 'change' }]
      }
    }
  },
  computed: { // 计算属性
    cTitle () { // 标题一共多少条
      return '数据一共' + this.page.counts + '条' // 字符串拼接
    }
  },
  created () { // 生命周期-初始化数据
    this.getList()// 获取列表
  },
  methods: {
    async getList () { // 获取数据列表
      this.page.pagesize = this.$route.query.name ? 1000 : 10
      const { data } = this.$route.query.id ? await list({ ...this.page, subjectID: this.$route.query.id }) : await list(this.page)
      this.list = data.items
      this.page.page = Number(data.page) // 获取当前页数--(返回的当前页page是字符串)
      this.page.pagesize = data.pagesize // 获取一页多少条
      this.page.pages = data.pages // 总页数
      this.page.counts = data.counts // 获取总条数
    },
    PageChange (page) { // (监听) 点击页数实现跳转
      this.page.page = page // 当前页
      this.formInline.user ? this.search() : this.getList() // 重新获取列表
    },
    handleSizeChange (size) { // 监听(每页条数)
      this.page.pagesize = size // 当前页数传给数据里
      this.formInline.user ? this.search() : this.getList() // 重新获取列表
    },
    async DelStudy (id) { // 删除学科
      await this.$confirm('此操作将永久删除角色?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove({ id }) // 删除
        this.getList() // 重新获取接口
        if (this.list.length === 1 && this.page.page > 1) { // 当数据只有一条的时候-页数减一
          this.page.page--
        }
        this.$message.success('删除成功') // 消息提示
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    updatetList (data) { // 修改学科数据->获取前详情
      this.showDialog = true // 打开弹层
      this.$refs.editDepts.detail(data) // 传入给子组件一个data->用$ref获取子组件的所有实例
    },
    EmployeeEnum (row, column, cellValue, index) { // 状态修改->更改表格里面的状态
      this.nowState = status

      const obj = status.find(item => item.value === cellValue) // 查找值是否相等->相等返回
      return obj.value ? '已' + obj.label : '已' + '禁用' // 判断是否禁用
    },
    async open (data) { // 点击启用 和禁用 发送请求 传入参数{id,state}
      await changeState({ id: data.id, state: data.state === 1 ? 0 : 1 }) // 发送请求
      this.$message.success('操作成功')
      this.getList() // 重新铺设列表
    },
    async search () { // 搜索功能
      // this.page.pagesize = 1000 // 定义当前页数多少条
      // await this.getList() // 确保搜索完数据 还能搜索
      await this.getList()
      const a = { 启用: 1, 禁用: 0 } // 定义一个启用&禁用
      // var { data } = await list({ ...this.page, state: a[this.formInline.region] })
      // this.formInline.region = this.formInline.region === '启用' ? 1 : 0
      var { data } = await this.formInline.user ? (this.formInline.region ? await list({ ...this.page, state: a[this.formInline.region], directoryName: this.formInline.user }) : await list({ ...this.page, directoryName: this.formInline.user })) : (this.formInline.region ? await list({ ...this.page, state: a[this.formInline.region] }) : await list(this.page))
      this.list = data.items
      this.page.pagesize = data.pagesize // 获取一页多少条
      this.page.pages = data.pages // 总页数
      this.page.counts = data.counts // 获取总条数
    },
    reset () { // 重置表单
      this.formInline = {
        user: '',
        region: ''
      }
      this.getList() // 重新获取列表
    }
  },
  filters: { // 筛选
    parseTimeByString, // 时间注册
    state (value) { // 获取状态 判断是否禁用
      return value === 0 ? '启用' : '禁用' // 返回一个 启用或者 禁用
    }
  }

}
</script>

<style scoped>
 .el-form-item {
  display: inline-block;
    margin-right: 1.625rem;
    margin-left: 0.833rem;
    margin-top: 0.042rem;
    vertical-align: top;
 }
.el-pagination{
  margin-top: 0.5rem;
}

</style>
